<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>人事管理</el-breadcrumb-item>
                <el-breadcrumb-item>部门管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr style="border: 1px solid #F2F6FC;">
        <div class="departList">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="领导">
                    <el-select v-model="leaderId">
                        <el-option label=" " value=" "></el-option>
                        <el-option v-for="item in leaderList" :key="item.leaderId" :label="item.name"
                            :value="item.leaderId">{{ item.name }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门名">
                    <el-select v-model="departId">
                        <el-option label=" " value=" "></el-option>
                        <el-option v-for="item in departList" :key="item.departId" :label="item.departName"
                            :value="item.departId">{{ item.departName }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchDepart(departId,leaderId)">查询</el-button>
                    <el-button type="primary" @click="addDepart()">添加部门</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="departList" border style="width: 100%">
                <el-table-column prop="departId" label="部门Id">
                </el-table-column>
                <el-table-column prop="departName" label="部门名">
                </el-table-column>
                <el-table-column prop="departLeaderId" label="部门领导Id">
                </el-table-column>
                <el-table-column prop="workonTime" label="部门上班时间">
                </el-table-column>
                <el-table-column prop="workoffTime" label="部门下班时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getDepartListWithCondition, getDepartLeader, addOrUpdateDepart } from '@/api/api'
export default {
  data () {
    return {
      departList: [],
      departId: null,
      leaderId: null,
      leaderList: [],
      pageNumber: 1,
      pageSize: 5,
      total: 0
    }
  },
  methods: {
    searchDepart (departId, leaderId) {
      const params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        departId: departId,
        leaderId: leaderId
      }
      getDepartListWithCondition(params).then(res => {
        console.log(res.data)
        this.departList = res.data.data.departList
        this.total = res.data.data.total
      })
    },
    addDepart () {
      this.$prompt('请输入部门名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const params = {
          departName: value
        }
        addOrUpdateDepart(params).then(res => {
          console.log(res.data)
        })
        this.$router.go()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    handleClick (row) {
      this.$router.push({
        path: '/personel/dm/update',
        query: {
          departId: row.departId,
          departName: row.departName
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.serchUser()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this.serchUser()
    }
  },
  mounted () {
    getDepartLeader().then(res => {
      console.log(res.data)
      this.leaderList = res.data.data
    })
    this.searchDepart()
  }
}
</script>

<style lang="scss" scoped>
.departList {
    margin: 20px 0px 0px 0px;
}
</style>
